<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      v-show="task_id == null">

      <el-table-column label="名字">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.status }}</span>
        </template>
      </el-table-column>

      <el-table-column label="时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.now }}</span>
        </template>
      </el-table-column>

    <el-table-column
      fixed="right"
      label="操作">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
      </template>
    </el-table-column>

    </el-table>

    <div v-show="task_id != null">
      <el-button type="primary" icon="el-icon-refresh" @click="handleRefresh()"></el-button>

<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>参数</span>
  </div>
  
  <div v-for="(v, k) in task_arguments" class="text item">
    {{ con[k] + ":  "+ v }}
  </div>
</el-card>


    <el-table
      v-loading="step_loading"
      :data="task_step_list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      v-show="task_id != null">

      <el-table-column label="ID">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column label="名字">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.status }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <span><a target="_blank"  @click="handleLog(scope)"> 日志 </a></span>
        </template>
      </el-table-column>

    </el-table>
    </div>
  </div>
</template>

<script>
import { getTask } from '@/api/task'

export default {
  watch: {
    task_id: function(val){
      this.fetchOne(val)
    },
    task: function(val){
      this.task_step_list = this.task.steps
      this.task_arguments = this.task.arguments
    }
  },
  data() {
    return {
      list: [],
      listLoading: false,
      task_id: null,
      task: null,
      task_step_list: null,
      step_loading: false,
      task_arguments: {},
      con: {
        "now": "时间",
        "backupdelta": "备份路径",
        "host": "主机",
        "scheduler": "调度器",
        "version": "软件版本",
        "database": "数据库"
      }
    }
  },
  created() {
    console.log(this.$route.query)
    if (this.$route.query){
      this.fetchData()
    }else{
      this.show_task_detail = true
      this.fetchOne(this.task_id)
    }
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getTask().then(response => {
        this.list = response.result
        this.listLoading = false
      })
    },
    fetchOne(_id){
      this.step_loading = true
      getTask({"id": _id}).then(response=>{
        this.task = response.result
      })
      this.step_loading = false
    },
    handleClick(row) {
      this.task_id = row._id
    },
    changeStepIndex(i) {
    },
    handleRefresh(){
      this.step_loading = true
      this.fetchOne(this.task_id)
    },
    handleLog(scope){
      window.open("http://172.16.50.89/logs/" + this.task_id + "/" + scope.$index + "/log.txt", "_blank")
    }
  }
}
</script>
